<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../template/index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:define name="title">
		<title>#{msg['add-new']} #{msg['employee']}</title>	
		<h:outputScript library="js" name="ajaxfileupload.js" />
		<script>
		//<![CDATA[
			$('document').ready(function(){
				$('#candidate-id').addClass("menu-left-selected");
				var item = $('#candidate-id').next('li').find("ul");
				if(item == null){return;}
				item.css({"display":"block"});
				
				
				$(".input-photo").click(function(){
					$("#fileupload").click();
					$("#upload-photo-staff").show();
				});
				
				$("#upload-photo-staff").click(function() {
					$('#loading-up').ajaxStart(function() {
						$(this).show();
					}).ajaxComplete(function() {
						$(this).hide();
					});
					$.ajaxFileUpload({
						url : '#{facesContext.externalContext.requestContextPath}/UploadAjax',
						secureuri : false,
						fileElementId : 'fileupload',
						dataType : 'json',
						success : function(data, status) {
							if (typeof (data.error) != 'undefined') {
								if (data.error != '') {
									//alert(data.error);
								} else {
									//alert(data.msg);
								}
							}
							$("#fileupload").replaceWith('<input type="file" id="fileupload" name="fileupload" class="visible-hide" value=""/>');
							$("#upload-photo-staff").hide();
						},
						error : function(data, status, e) {
							//alert(e);
							$("#fileupload").replaceWith('<input type="file" id="fileupload" name="fileupload" class="visible-hide" value=""/>');
							$("#upload-photo-staff").hide();
						}
					});
				});
			});
			// ]]>
		</script>
	</ui:define>
	<ui:define name="lcontent">
		<ui:include src="../template/menu-left/human-resources.xhtml"></ui:include>
	</ui:define>
	<ui:define name="rcontent">
		<h:form id="form">
			<f:event type="preRenderView" listener="#{employeeManagement.onloadAddNew}" />
			<div class="control">
				<div class="control-button">
					<h:commandLink onclick="loading();" action="#{employeeManagement.addCandidate}">
						<img src="#{facesContext.externalContext.requestContextPath}/resources/images/icon/plus.png" />
						<span>#{msg['add-new']}</span>
					</h:commandLink>
				</div>
				<span class="clear"></span>
			</div>
			<div class="rcontent-main">
				<div class="loading">
					<img src="#{facesContext.externalContext.requestContextPath}/resources/images/loading.gif" />
				</div>
				<div class="input-lpanel">
					<span class="bold block center">#{msg['picture']}</span>
					<div class="wrapper-photo">
						<div class="input-photo center">
							<img src="http://www.livevn.com/attachment/201104/21/2922728_1303374192eBdG.jpg" alt="" />
						</div>
						<div id="upload-photo-staff" class="upload-photo-staff center-div none center" >
							<span>#{msg['upload']}</span>
						</div>
						<div class="none center" id="loading-up"><img align="absmiddle"
							src="#{facesContext.externalContext.requestContextPath}/resources/images/loadingup.gif" />
							uploading...
						</div>
					</div>
				</div>
				<div class="input-rpanel">
					<span class="input-table-caption">#{msg['personal-information']}</span>
					<table class="input-table w100">
						<tr>
							<td class="input-table-first">#{msg['lastname']} <span class="required">*</span></td>
							<td><h:inputText id="last_name" styleClass="input" value="#{employeeManagement.pe_add.ltne}" maxlength="50"
								required="true" requiredMessage="#{msg['lastname']}: #{msg['cannot-be-blank']}"/>
							</td>
						</tr>
						<tr>
							<td class="input-table-first">#{msg['firstname']} <span class="required">*</span></td>
							<td><h:inputText id="first_name" styleClass="input" value="#{employeeManagement.pe_add.ftne}" maxlength="50"
								required="true" requiredMessage="#{msg['firstname']}: #{msg['cannot-be-blank']}"/>
							</td>
						</tr>
						<tr>
							<td class="input-table-first">#{msg['birthday']} <span class="required">*</span></td>
							<td>
								<h:inputText id="birthday" styleClass="input" value="#{employeeManagement.pe_add.bhdy}" required="true"
								requiredMessage="#{msg['birthday']}: #{msg['cannot-be-blank']}" converterMessage="#{msg['birthday']}: #{msg['invalid']}">
									<f:convertDateTime pattern="yyyy-MM-dd"></f:convertDateTime>
								</h:inputText>
								<script type="text/javascript">
									$('document').ready(function() {
										$("#form\\:birthday").datepicker({ changeMonth: true , changeYear: true ,
											dateFormat: 'yy-mm-dd',yearRange: '1900:2050'});
								  	});
								</script>
							</td>
						</tr>
						<tr>
							<td class="input-table-first">#{msg['gender']}</td>
							<td><h:selectOneMenu id="sex" styleClass="input w50" value="#{employeeManagement.pe_add.sx}">
									<f:selectItem itemLabel="#{msg['male']}" itemValue="1"></f:selectItem>
									<f:selectItem itemLabel="#{msg['female']}" itemValue="2"></f:selectItem>
								</h:selectOneMenu>
							</td>
						</tr>
						<tr>
							<td class="input-table-first">#{msg['address']}</td>
							<td><h:inputText id="address" styleClass="input" value="#{employeeManagement.pe_add.adrs}" maxlength="100"/>
							</td>
						</tr>
						<tr>
							<td class="input-table-first">#{msg['email']}</td>
							<td><h:inputText id="email" styleClass="input" value="#{employeeManagement.pe_add.el}" maxlength="50"/>
							</td>
						</tr>
						<tr>
							<td class="input-table-first">#{msg['phone']} <span class="required">*</span></td>
							<td><h:inputText id="phone" styleClass="input" value="#{employeeManagement.pe_add.penmbr}" maxlength="20"
								required="true" requiredMessage="#{msg['phone']}: #{msg['cannot-be-blank']}"/>
							</td>
						</tr>
						<tr>
							<td class="input-table-first">#{msg['description']}</td>
							<td><h:inputText id="description" styleClass="input" value="#{employeeManagement.pe_add.dscptn}" maxlength="100"/>
							</td>
						</tr>
					</table>
				</div>
				<input type="file" id="fileupload" name="fileupload" class="visible-hide" value=""/>
				<span class="clear:both"></span>
			</div>
		</h:form>
	</ui:define>
</ui:composition>